<template>
    <div>
        <el-popover placement="bottom" trigger="click">
            <template :loading="false">
                <el-checkbox :value="select_all" @change="allChange">全选</el-checkbox>
                <div v-for="(item, index) in selectItem" :key="index">
                    <el-checkbox
                        :value="item.is_show"
                        @change="changeSelect($event, item)"
                    >
                        {{item.label}}
                    </el-checkbox>
                </div>
            </template>
            <!--  icon='el-icon-arrow-down' -->
            <span slot="reference" class="tag2" @click=" ">
					<font color="#31A3FF">显示字段</font>
            </span>
        </el-popover>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectItem: this.tableHeader,
        }
    },
    props: ['tableHeader'],
    created() {
    },
    computed: {
        select_all() {
            return this.selectItem.every(v => v.is_show)   
        } 
    },
    watch: {
        tableHeader: {
            handler: function(val) {
            },
            immediate: true
        },
    },
    methods: {
        allChange(val) {
            this.selectItem.forEach(v => {
                v.is_show = val
            });
            this.$emit('headerSet', this.selectItem)
        },
        changeSelect(val, item) {
            this.selectItem[this.selectItem.findIndex(v => v.label == item.label)].is_show = val
            this.$emit('headerSet', this.selectItem)
        }
    }
}
</script>

<style lang="less" scoped>
.tag2 {
	display: block;
    font-size: 15px;
    float: right;
    text-align: center;
    border:1px solid rgba(36,157,255,1);
    border-radius:12px;
    padding: 2px 13px;
}
.el-checkbox__label{
    color:rgba(142,142,142,1)!important;
}
</style>